<template>
  <div>
    <a-table
      rowKey="menuItemId"
      :columns="columns"
      :data-source="tabledata"
      :scroll="{ y: 560, x: 1300 }"
    >
      <template #isSubMenu="{ record }">
        <a-switch v-model:checked="record.isSubMenu" :disabled="true" />
      </template>
      <template #hasMenuItemGroup="{ record }">
        <a-switch v-model:checked="record.hasMenuItemGroup" :disabled="true" />
      </template>
      <template #action="{ record }">
        <a-popconfirm title="是否删除?" @confirm="onDelete(record.contentId)">
          <a-button type="default" shape="circle">
            <template #icon><iconpark-icon name="delete"></iconpark-icon></template>
          </a-button>
        </a-popconfirm>
        <a-button type="default" shape="circle" class="ml-1" @click="onupdate(record)">
          <template #icon><iconpark-icon name="update"></iconpark-icon></template>
        </a-button>
      </template>
    </a-table>

    <div class="float-r" @click="add">
      <iconpark-icon name="add"></iconpark-icon>
    </div>

    <a-modal
      v-model:visible="modelVisible"
      title="修改内容"
      ok-text="确认"
      cancel-text="取消"
      style="top: 00px"
      width="100%"
      wrapClassName="full-modal"
      @ok="modelConfirm"
    >
      <div class="flex-wrap">
        <a-select style="width: 300px" v-model:value="updateData.menuItemTitle">
          <a-select-option
            v-for="(i, index) in menuItemData"
            :key="index"
            :value="i.menuitem"
            @click="selectChange(i.menuitem, i.menuTitle)"
          >
            {{ i.menuTitle }}
          </a-select-option>
          <template #suffixIcon> <iconpark-icon name="sigh"></iconpark-icon></template>
        </a-select>

        <a-input placeholder="作者" v-model:value="updateData.author">
          <template #prefix>
            <iconpark-icon name="author"></iconpark-icon>
          </template>
          <template #suffix>
            <a-tooltip title="作者">
              <iconpark-icon name="sigh"></iconpark-icon>
            </a-tooltip>
          </template>
        </a-input>
        <a-input placeholder="项目地址" v-model:value="updateData.projectAddress">
          <template #prefix>
            <iconpark-icon name="address"></iconpark-icon>
          </template>
          <template #suffix>
            <a-tooltip title="项目地址">
              <iconpark-icon name="sigh"></iconpark-icon>
            </a-tooltip>
          </template>
        </a-input>
        <a-input placeholder="资源" v-model:value="updateData.whereFrom">
          <template #prefix>
            <iconpark-icon name="source"></iconpark-icon>
          </template>
          <template #suffix>
            <a-tooltip title="资源">
              <iconpark-icon name="sigh"></iconpark-icon>
            </a-tooltip>
          </template>
        </a-input>
      </div>

      <mavon-editor
        class="mt-1"
        ref="vm"
        v-model="updateData.contentDetail"
        :subfield="false"
        @imgAdd="imgAdd"
        @imgDel="imgDel"
      ></mavon-editor>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import axios from "axios";
const columns = [
  {
    title: "内容id",
    align: "center",
    width: 100,
    dataIndex: "contentId",
    fixed: "left",
  },
  { title: "导航菜单id", width: 120, dataIndex: "menuItemId" },
  { title: "对应导航菜单标题", dataIndex: "menuItemTitle" },
  { title: "作者", dataIndex: "author" },
  { title: "来源", dataIndex: "whereFrom" },
  { title: "项目地址", dataIndex: "projectAddress" },
  { title: "创建时间", dataIndex: "createdTime" },
  { title: "更新时间", dataIndex: "updateTime" },
  {
    title: "Action",
    fixed: "right",
    width: 110,
    slots: { customRender: "action" },
  },
];
export default defineComponent({
  props: { tabledata: Array },
  setup(props) {
    const { proxy } = getCurrentInstance();
    const modelVisible = ref(false);
    const updateData = ref({
      contentId: "",
      menuItemId: "",
      menuItemTitle: "对应menuid标题",
      contentDetail: "详细内容",
      whereFrom: "来源",
      author: "作者",
      reference: "资源",
      projectAddress: "项目地址",
    });
    const menuItemData = ref([]);
    const isAdd = ref(false);

    onMounted(() => {
      //menuItemData菜单title数据
      proxy.$api.get("c-m").then((res) => {
        if (res.error === 0) {
          menuItemData.value = res.message;
        } else message.error(res.message);
      });
    });

    function onDelete(id) {
      proxy.$api.get("content/delete?id=" + id).then((res) => {
        if (res.error === 0) {
          modelVisible.value = false;
          message.success(res.message);
          setTimeout(() => {
            location.reload();
          }, 1000);
        } else message.error(res.message);
      });
    }
    function onupdate(object) {
      updateData.value = object;
      modelVisible.value = true;
      isAdd.value = false;
    }
    const modelConfirm = () => {
      if (isAdd.value) {
        proxy.$api.post("content/add", updateData.value).then((res) => {
          if (res.error === 0) {
            modelVisible.value = false;
            message.success(res.message);
            setTimeout(() => {
              location.reload();
            }, 1000);
          } else message.error(res.message);
        });
      } else {
        proxy.$api.post("content/update", updateData.value).then((res) => {
          // console.log(updateData.value);
          if (res.error === 0) {
            modelVisible.value = false;
            message.success(res.message);
            setTimeout(() => {
              location.reload();
            }, 1000);
          } else message.error(res.message);
        });
      }
    };

    const selectChange = (id, title) => {
      updateData.value.menuItemId = id;
      updateData.value.menuItemTitle = title;
    };
    const add = () => {
      modelVisible.value = true;
      isAdd.value = true;
      updateData.value = {
        contentId: "",
        menuItemId: "",
        contentDetail: "详细内容",
        whereFrom: "来源",
        author: "作者",
        reference: "资源",
        projectAddress: "项目地址",
      };
    };
    //图片上传
    function imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("file", $file);
      axios({
        url: "http://120.76.136.48:5000/ossController/upload",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" },
      }).then((res) => {
        if (res.data.error === 0) {
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
          // $vm.$img2Url 详情见本页末尾
          proxy.$refs.vm.$img2Url(pos, res.data.message);
        } else {
          message.error(res.data.message);
        }
      });
    }
    function imgDel() {
      console.log("图片删除");
    }
    return {
      columns,
      modelVisible,
      updateData,
      menuItemData,
      onDelete,
      onupdate,
      modelConfirm,
      selectChange,
      add,
      imgAdd,
      imgDel,
    };
  },
});
</script>

<style scoped></style>
